<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>登陆页</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1357506_s0ttngg1ds.css"/>
    <link rel="stylesheet" href="../css/mall.css"/>
</head>




<body>




<section class="banner">
    <div class="search" flex="cross:center">
        <div flex="cross:center">
            <i class="iconfont iconsousuo"></i>
            <input type="text" placeholder="请输入关键词进行搜索"/>
        </div>
    </div>
</section>



<!--金刚区-->
<section class="diamond">
    <div class="top-icon" flex>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan1">
                <i class="iconfont iconbiaoqian"></i>
            </div>
            <span>随便写的</span>
        </div>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan2">
                <i class="iconfont iconmedicines1"></i>
            </div>
            <span>随便写的</span>
        </div>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan3">
                <i class="iconfont iconlvguo"></i>
            </div>
            <span>随便写的</span>
        </div>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan4">
                <i class="iconfont icondachahu"></i>
            </div>
            <span>随便写的</span>
        </div>
    </div>
    <div class="top-icon" flex>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan5">
                <i class="iconfont iconicon-test1"></i>
            </div>
            <span>随便写的</span>
        </div>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan6">
                <i class="iconfont iconqiandaizi"></i>
            </div>
            <span>随便写的</span>
        </div>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan7">
                <i class="iconfont iconcao"></i>
            </div>
            <span>随便写的</span>
        </div>
        <div flex="dir:top main:center cross:center">
            <div class="dia-yuan dia-yuan8">
                <i class="iconfont icongengduo"></i>
            </div>
            <span>随便写的</span>
        </div>
    </div>
</section>


<!--go广告-->
<section class="banner-2" flex="main:center">
    <div></div>
</section>



<!--第一层-->
<section class="f1" flex="main:justify">

    <div class="f1-left">

        <div class="youhui">
            <div>
                <div class="f1-yh" flex="cross:center">
                    <h1>优惠卷</h1>
                    <div class="xianshi">限时领取</div>
                </div>
                <span>刷新超低折扣价</span>
            </div>

            <div flex="main:justify" class="yh-img">
                <img src="../img/f1-blueberries.png" class="blueberries"/>
                <img src="../img/f1-rou.png" class="rou"/>
            </div>
        </div>

        <div class="nongzhuang" flex="main:justify cross:center">
            <div>
                <span>农庄有趣</span>
                <p>当季蔬果抢鲜</p>
            </div>
            <img src="../img/f1-nut.png"/>
        </div>

        <div class="yiyuan" flex="main:justify cross:center">
            <div>
                <span>一元拼团</span>
                <p>拼团享低价</p>
            </div>
            <img src="../img/f1-cheese.png"/>
        </div>

    </div>


    <div class="f1-right">
        <div class="youhui">
            <div>
                <div class="f1-yh" flex="cross:center">
                    <h1>限时抢购</h1>
                    <div class="xianshi">售完为止</div>
                </div>
                <span>打破电商价格壁垒</span>
            </div>

            <div flex="main:justify" class="yh-img">
                <img src="../img/f1-kuaizi.png" class="blueberries"/>
                <img src="../img/f1-lianzi.png" class="rou"/>
            </div>
        </div>

        <div class="nongzhuang" flex="main:justify cross:center">
            <div>
                <span>积分兑换</span>
                <p>免费领好物</p>
            </div>
            <img src="../img/f1-tea.png"/>
        </div>

        <div class="yiyuan" flex="main:justify cross:center">
            <div>
                <span>七折直销</span>
                <p>买到就是赚到</p>
            </div>
            <img src="../img/f1-jianguo.png"/>
        </div>
    </div>
</section>



<!--商城论坛-->
<section class="f2" >
    <div class="f2-top" flex>
        <img src="../img/f2-forum.png"/>
        <div flex="dir:top cross:top">
            <div class="hot-height" flex="cross:center">
                <div class="hot" flex="main:center cross:center">热评</div>
                <p>风味熟食-就爱这肉感！即食原味麻辣香辣牛...</p>
            </div>
            <div class="hot-height" flex="cross:center">
                <div  class="hot" flex="main:center cross:center">热评</div>
                <p>峰巢蜜蜂蜜天然野生蜂巢盒装纯农家自产新...</p>
            </div>
        </div>
    </div>
    <div class="video" flex="main:center cross:center">
        <div flex=" dir:top main:center cross:center">
            <i class="iconfont iconbofang"></i>
            <span>播放视频</span>
        </div>

    </div>
</section>



<!--展柜推荐-->
<section class="f3">
    <!-- 标题-->
    <div class="f3-xb" flex="cross:center" >
        <div></div>
        <span>展柜推荐</span>
        <p>High quality recommendation</p>
    </div>
    <!-- f3-f1-->
    <div class="f3-1" flex="main:justify">
        <div  flex="cross:center">
            <img src="../img/f3-tea.jpg" />
            <div flex="dir:top cross:center">
                <b>原生态野百花蜜</b>
                <span>森农良品</span>
                <p>福建连城特产美食</p>
            </div>
        </div>
        <div flex="cross:center">
            <img src="../img/f3-yiner.jpg" />
            <div flex="dir:top cross:center">
                <b>盛耳银耳白木耳</b>
                <span>象湖人家</span>
                <p>福建银耳干货</p>
            </div>
        </div>
    </div>

    <!-- f3-f2-->
    <div flex>
        <div class="f3-2">
            <div>
                <p>东北野生猴头菇</p>
                <span>健康美味干货</span>
            </div>
            <div flex="main:justify">
                <img src="../img/f3-gu1.png"/>
                <img src="../img/f3-gu2.png"/>
            </div>
        </div>
        <div class="f3-2 f3-2right">
            <div>
                <p>特产黑木耳干货</p>
                <span>农家自产</span>
            </div>
            <div flex="main:justify">
                <img src="../img/f3-muer1.png"/>
                <img src="../img/f3-muer2.png"/>
            </div>
        </div>
    </div>
    <!-- f3-f3-->
    <div class="f3-f3" flex>
        <div class="f3-2">
            <div>
                <p>农家豆干</p>
                <span>漳平特产</span>
            </div>
            <div flex="main:justify" >
                <img src="../img/f3-dougan1.png" id="dougan1"/>
            </div>
            <img src="../img/f3-dougan2.png" id="dougan2"/>
        </div>
        <div class="f3-2 f3-2right">
            <div>
                <p>草菇食用菌</p>
                <span>个大肉厚</span>
            </div>
            <div flex="main:justify" >
                <img src="../img/f3-jun1.png" id="jun1"/>
            </div>
            <img src="../img/f3-jun2.png"id="jun2"/>
        </div>
    </div>

    <!-- 分割线-->
    <div class="fenge"></div>

</section>



<!--热销排行-->
<section class="f4">
    <!-- 标题-->
    <div class="f3-xb" flex="cross:center" >
        <div></div>
        <span>热销排行</span>
        <p>Top selling</p>
    </div>

    <!-- f4-f1-->
    <div class="f4-1" flex>
        <div class="f3-2 ">
            <div>
                <p>大井头青豆腐竹</p>
                <span>健康美味干货</span>
            </div>
            <div flex="main:justify">
                <img src="../img/f4-fuzhu1.png" id="fuzhu1"/>
            </div>
            <img src="../img/f4-fuzhu2.png" id="fuzhu2"/>
        </div>
        <div class="f3-2 f3-2right">
            <div>
                <p>秘制辣猪肉条</p>
                <span>美味香辣</span>
            </div>
            <div flex="main:justify">
                <img src="../img/f4-zhu1.png" id="zhu1"/>
            </div>
            <img src="../img/f4-zhu2.png" id="zhu2"/>
        </div>
    </div>
    <!-- f4-f2-->
    <div class="f3-f3" flex>
        <div class="f3-2">
            <div>
                <p>客家炒米粉</p>
                <span>手工米线</span>
            </div>
            <div flex="main:justify" >
                <img src="../img/f4-fen1.png" id="fen1"/>
            </div>
            <img src="../img/f4-fen2.png" id="fen2"/>
        </div>
        <div class="f3-2 f3-2right">
            <div>
                <p>麻辣香辣牛肉丝</p>
                <span>龙岩特产</span>
            </div>
            <div flex="main:justify" >
                <img src="../img/f4-niu1.png" id="niu1"/>
            </div>
            <img src="../img/f4-niu2.png"id="niu2"/>
        </div>
    </div>
    <!-- 分割线-->
    <div class="fenge"></div>

</section>


<!--标签栏-->
<section class="lable" flex>
    <div flex="dir:top main:center cross:center">
        <i class="iconfont iconshouye"></i>
        <span>首页</span>
    </div>
    <div flex="dir:top main:center cross:center">
        <i class="iconfont iconleimupinleifenleileibie"></i>
        <span>分类</span>
    </div>
    <div flex="dir:top main:center cross:center">
        <i class="iconfont icongouwuchekong"></i>
        <span>购物车</span>
    </div>
    <div flex="dir:top main:center cross:center">
        <i class="iconfont iconwode"></i>
        <span>个人中心</span>
    </div>
</section>







</body>
</html>